<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>this 的问题</title>
</head>
<body>
  <script>
    /**
     * 虽然Proxy可以代理针对目标对象的访问，但它不是目标对象的透明代理，即不做任何拦截的
     * 情况下，也无法保证与目标对象的行为一致，主要原因就是Proxy代理的情况下，
     * 目标对象内部的this关键字会指向Proxy代理。
    */
   const target = {
     m: function() {
       console.log(this === proxy)
     }
   }
   const handler = {};
   const proxy = new Proxy(target, handler);
   target.m(); // false
   proxy.m(); // true
   //上面代码中，一旦proxy代理target，target.m()内部的this就是指向proxy，而不是target。
  //  所以，虽然proxy没有做任何拦截，target.m()和proxy.m()返回不一样的结果。
  </script>
  <script>
    // 下面是一个例子，由于this指向的变化，导致Proxy无法代理目标对象。
    const _name = new WeakMap();
    class Person {
      constructor(name) {
        _name.set(this, name)
      }
      get name() {
        return _name.get(this);
      }
    }
    const jane = new Person('Jane');
    console.log(jane.name) // Jane
    const proxy1 = new Proxy(jane, {});
    console.log(proxy.name)// undefined
    /**
     * 上面代码中，目标对象jane的name属性，实际保存在外部WeakMap对象_name上面，通过this键区分。
     * 由于通过proxy.name访问时，this指向proxy，导致无法取到值，所以返回undefined。
    */
  </script>
</body>
</html>